<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件上传</title>
    <style>
        #tiao {width: 500px;height: 30px; background: red;}
        #jindu {width: 0%;background: green;line-height: 30px;}
    </style>
</head>
<body>

<label for="file"><img src="1.png" alt="" id="tmp_img"></label>
<input type="file" id="file" style="display: none">
<div id="tiao">
    <div id="jindu"><span>0</span>%</div>
</div>
<script>
    var file = document.getElementById('file');
    var jindu = document.getElementById('jindu');
    file.onchange = function ()
    {
        // 获取文件大小
        var size = this.files[0].size;
        // 开始切割的下标
        var start;
        // 结束位置
        var end = 0;
        var len = 1024*1023*2; // 切割的长度
        var jd = 0;
        var i = 0;
        // 判断结束位置是否大于文件实际大小，如果大于，说明以及切割到最后了
        while (end < size ) {

        start = i * len;
        end = start + len;
        i ++;



        // blob 对象的 slice切割方法
        if (end > size) {
            end = size;
        }
        var blob = this.files[0].slice(start , end);
            // 实例化表单数据对象。将切割的文件一部分一部分上传上服务器
        var fd = new FormData();
        fd.append('file' , blob);
        var xhr = new XMLHttpRequest();
        xhr.open('post' , '5-big-file-upload.php' );
        xhr.send(fd);
        xhr.onreadystatechange = function ()
        {
            if (xhr.readyState == 4 && xhr.status == 200)
            {
                jd = parseInt(end / size * 100);
                jindu.getElementsByTagName('span')[0].innerHTML = jd;
                jindu.style.width = jd + '%';
            }
        }

            // xhr.upload.onprogress = function () {

            // }
        }












        // var xhr = new XMLHttpRequest();
        // xhr.open('post' , '2-file.php' , false);
        // // 实例化一个空的表单对象
        // var fd = new FormData();
        //
        // fd.append('file' , this.files[0]);
        //
        // xhr.send(fd);
        // xhr.onreadystatechange = function ()
        // {
        //     if (xhr.readyState == 4 && xhr.status == 200)
        //     {
        //         tmp_img.src = xhr.responseText;
        //     }
        // }
    }
</script>
</body>
</html>